<template>
  <div>
    <!-- 浏览器的$route.params方法，id是path:'/home/message/detail/:id', -->
    <p>ID:{{$route.params.id}}</p>
    <ul>
      <li>id:{{messageDetails.id}}</li>
      <li>title:{{messageDetails.title}}</li>
      <li>content:{{messageDetails.content}}</li>
    </ul>
  </div>
</template>

<script>

export default {
  data(){
    return{
    /*  messageDetails:{
       id:'',
       title:'',
       content:'',
     } */
     messageDetails:'',
    }
  },

  mounted(){
    setTimeout(()=>{
        const allMessageDetails=[
        {
          id: 1,
          title: "message01",
          content:'message01 content1'
        },
        {
          id: 2,
          title: "message02",
          content:'message01 content1'
        },
        {
          id: 3,
          title: "message03",
          content:'message01 content1'
        },
        {
          id: 4,
          title: "message04",
          content:'message01 content1'
        },
      ];

      this.allMessageDetails = allMessageDetails;
      const id = this.$route.params.id*1;
      this.messageDetails = allMessageDetails.find(detail => detail.id===id)
    },1000)
  },

  // 监视$route最新的值
  watch: {
    $route: function(value){//路由路径（params）发生了改变
      //this表示value
      const id = value.params.id*1;
      this.messageDetails = this.allMessageDetails.find(detail => detail.id===id)
    }
  }

};
</script>

<style>
</style>